<template>
  <div class="menulist1">
    <!-- 头部组件 -->
    <MenuListTop></MenuListTop>
    <div class="content1">
<!--      <input class="inp" type="text" @change="searchMenuList" placeholder="        输入关键字..." />-->
      <form action="/">
        <van-search
                class="search"
                v-model="dishname"
                show-action
                background="#f2f2f2"
                placeholder="请输入搜索关键词"
                @search="searchMenuList"
                @cancel="searchMenuList"
        />
      </form>
<!--      <van-icon class="sousuo" name="search" />-->
<!--      <div class="select" id="select">-->
        <!-- 选择分类 -->
<!--        <div class="classify">-->
<!--          <select @change="searchMenuList">-->
<!--            <option value="0">请选择菜系</option>-->
<!--            <option v-for="item in cookstyle" value="item.cookstyle.cid" >{{item.cookstyle.style}}</option>-->
<!--          </select>-->
<!--          <van-sidebar v-model="cid" @change="changeCid">-->
<!--            <van-sidebar-item title="全部" />-->
<!--            <van-sidebar-item v-for="item in cookstyle" :title="item.cookstyle.style" />-->
<!--          </van-sidebar>-->
      <van-tree-select height="100%" :items="items" :main-active-index.sync="active" @click-nav="changeCid">
        <template #content>
          <van-card
                  v-for="item in menuList"
                  :price="item.price"
                  :desc="item.instroduce"
                  :title="item.dishName"
                  :thumb="item.menuImg"
                  @click-thumb="menuMsg(item.mid)"
          >
            <template #tags>
              <van-tag plain v-show="item.status==1" type="danger">已售空</van-tag>
              <van-tag plain v-show="item.status==2" type="danger">特价菜</van-tag>
            </template>

            <template #footer>
<!--                  <van-button size="mini" icon="plus" round></van-button>-->
<!--                  <van-field v-model="dishNum" type="digit" style="width: 20%"/>-->
<!--                  <van-button size="mini" icon="minus" round></van-button>-->
                <van-row type="flex" justify="end">
                    <van-button size="mini" @click="collcet(item.mid)" round>收藏</van-button>
<!--                    <van-col span="6"><van-button :disabled="item.dishNum<=0" size="mini" icon="minus" @click="jian(item)" round></van-button></van-col>-->
<!--                    <van-col span="6"><van-button size="mini" icon="plus" @click="jia(item)" round></van-button></van-col>-->
                    <van-stepper v-model="item.dishNum" theme="round" button-size="22" min="0"  @plus="jia(item)" @minus="jian(item)" disable-input :show-minus="item.dishNum>0" :show-input="item.dishNum>0" />
                </van-row>
<!--              <van-button size="mini" icon="cart-o">加入购物车</van-button>-->
<!--              <van-popup-->
<!--                v-model="addShopCarShow"-->
<!--                closeable-->
<!--                round-->
<!--                close-icon="close"-->
<!--                position="bottom"-->
<!--                :style="{ height: '30%' }"-->
<!--              >-->
<!--                  <van-form @submit="confirmAddShopCar">-->
<!--                      <van-field-->

<!--                              name="用户名"-->
<!--                              label="用户名"-->
<!--                              placeholder="用户名"-->
<!--                              :rules="[{ required: true, message: '请填写用户名' }]"-->
<!--                      />-->
<!--                      <div style="margin: 16px;">-->
<!--                          <van-button round block type="info" native-type="submit">提交</van-button>-->
<!--                      </div>-->
<!--                  </van-form>-->
<!--              </van-popup>-->
            </template>
          </van-card>
<!--            <van-image-->
<!--                    v-if="active === 1"-->
<!--                    src="https://img01.yzcdn.cn/vant/apple-2.jpg"-->
<!--            />-->
        </template>
      </van-tree-select>
<!--        </div>-->
<!--        &lt;!&ndash; 排序方式 &ndash;&gt;-->
<!--        <div class="sort">-->
<!--          <select>-->
<!--            <option value="default">请选择排序方式</option>-->
<!--            <option v-for="item in "-->
<!--          </select>-->
<!--        </div>-->
<!--      </div>-->
    </div>
<!--    <MenuListCont :menuList="menuList"></MenuListCont>-->
  </div>
</template>

<script>
import MenuListTop from "../components/menuListTop.vue";
import MenuListCont from "../components/menuListCont.vue";
import { Toast } from 'vant';
'../../vant-weapp/toast/toast'
export default {
  name: "menuList",
  components: {
    MenuListTop,
    MenuListCont,
  },
  data(){
    return{
      menuList:[],
      cookstyle:[
        // {"cid":"1","style":"川菜"},
        // {"cid":"2","style":"粤菜"}
      ],
      rid:"",
      cid:0,
      dishname:"",
      active: 0,
      items: [],
      //加入购物车的菜品数量
      caiNumber:0,
    }
  },
  created() {
    let rid = this.$route.params.rid;
    //console.log("rid========"+rid);
    this.rid=rid;
    //console.log("rid******"+this.rid);
    this.searchMenuList();
    this.searchCookStyle(rid);
  },
  methods:{
    //收藏
    collcet(mid){
        var token = sessionStorage.getItem("token");
        this.$http.post("/caipin/caipin/selectInsert?mid="+mid+"&token="+token).then(result=>{
            if (result.data.code===2000){
                this.$toast(result.data.msg);
            }else if(result.data.code===5000){
                this.$toast(result.data.msg);
            }
        })
    },
    menuMsg(mid){
      //console.log("rid//////"+this.rid);
      this.$router.push({
          name: "menuMsg",
          params: { mid: mid, rid: this.rid}
      })
    },
    //购物车菜品数量减1
    jian(item){
        this.caiNumber=item.dishNum;
        this.caiNumber--;
        //console.log(this.caiNumber);
        this.$http.post("/caipin/caipin/Phonegoods?mid="+item.mid+"&caiNumber="+this.caiNumber).then(result=>{
            if (result.data.code===2000){
                //console.log(result.data.code);
                this.searchMenuList();
            }
        })
    },
    //购物车菜品数量加1
    jia(item){
        this.caiNumber=item.dishNum;
        this.caiNumber++;
        //console.log(this.caiNumber);
        this.$http.post("/caipin/caipin/Phonegoods?mid="+item.mid+"&caiNumber="+this.caiNumber).then(result=>{
            if (result.data.code===2000){
                //console.log(result.data.code);
                this.searchMenuList();
            }
        })
    },
    changeCid(index){
      let cid = this.items[index].cid;
      this.cid=cid;
      this.searchMenuList();
      //alert(this.cid);
    },
    searchMenuList(){
      this.$http.post("/caipin/caipin/ridAllCaipin?rid="+this.rid+"&cid="+this.cid+"&dishname="+this.dishname).then(result=>{
        if (result.data.code===2000){
          console.log(result.data.data)
          this.menuList=result.data.data;
          this.menuList.forEach(item=>{
            if (item.dishNum==null){
                item.dishNum=0;
            }
          })
        }
      })
    },
    searchCookStyle(rid){
      this.$http.post("/caipin/caipin/cidName?rid="+rid).then(result=>{
        if (result.data.code===2000){
          //console.log(result.data.data)
          this.cookstyle=result.data.data;
          this.items=[{text:"全部",cid:"0"}]
          this.cookstyle.forEach(item=>{
            this.items.push({text:item.cookstyle.style,cid:item.cookstyle.cid});
          })
        }
      })
    }
  },
};
</script>

<style lang='less' scoped>
.menulist1 {
  .MenuListTop {
    position: fixed;
    top: 0;
    left: 0;
  }
  .content1 {
    padding: 0 4vw;
    .search {
      font-size: 4.3vw;
      width: 100%;
      height: 10.6667vw;
      border: #e74e40 1px solid;
      margin-top: 5.2vw;
      padding: 0vw;
      border-radius: 1.3333vw;
    }
    .inp {
      font-size: 4.3vw;
      width: 100%;
      height: 10.6667vw;
      border: #e74e40 1px solid;
      margin-top: 5.2vw;
      border-radius: 1.3333vw;
    }
    .sousuo {
      font-size: 5.6333vw;
      font-weight: 600;
      color: rgb(145, 145, 145);
      position: absolute;
      top: 21.9667vw;
      left: 5.6667vw;
    }

    .select {
      margin: 3.0667vw 0;
      text-align: center;
      display: flex;
      justify-content: left;
      .classify,
      .sort {
        background-color: rgba(153, 153, 153, 0.2);
        margin-right: 2.6667vw;
        padding: 1.6vw;
        border-radius: 1.6667vw;
      }
    }
  }
}
</style>